<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<jsp:useBean id="databaseBean" scope="session" class="warehouse.DatabaseBean"/>  

    
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加订单</title>
	
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.js"></script>
	<script>
	var cargoNum = 0;
	layui.use('form', function(){
	  var form = layui.form;
	});
	layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#orderDate' //指定元素
		    ,value: new Date()//默认为今天
		  });
		});
	layui.use('element', function(){
		  var element = layui.element;
		  
		  element.on('tabDelete(docDemoTabBrief)', function(data){
			  cargoNum--;
			});
		});
	
	</script>


</head>
<body>

	<h1 style="text-align:center">添加订单</h1>
	<form class="layui-form" action="add_order.jsp" method="post">
		<!-- 客户编号 -->
		
		<div class="layui-form-item">
		    <label class="layui-form-label">客户编号</label>
		    <div class="layui-input-block">
		      <select name="clientNo" lay-verify="required"> 
		        <option value="">请选择下单的客户编号</option>
		        <%
				String sql=String.format("SELECT clientNo,name FROM client;");
				ResultSet rs=databaseBean.executeQuery(sql);
				while(rs.next()){
					%>
					<option value="<%=rs.getString("clientNo")%>"><%=rs.getString("clientNo")+" "+rs.getString("name")%></option>	
					<%
				}
				rs.close();
				%>
		        
		      </select>
		    </div> 
  		</div>
		<!-- 下单日期 -->
		<div class="layui-form-item ">
		    <label class="layui-form-label">下单日期</label>
		    <div class="layui-inline">
		  	<input type="text" name="orderDate" id="orderDate" placeholder="请输入下单日期" required  lay-verify="required" class="layui-input">
		    </div>
  		</div>
		<!-- 货物 -->
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" lay-allowClose="true">
		  <ul class="layui-tab-title">
		  	<li class="layui-this" id="cargoLabel0" style="visibility:hidden">货物0</li>
		    
		  </ul>
		  <div class="layui-tab-content">
		  	<!-- 内容模板 -->
		  	<div class="layui-tab-item layui-show" id="cargo0" style="visibility:hidden">
	    		<!--货物编号  -->
		    	<div class="layui-form-item">
				    <label class="layui-form-label">货物编号</label>
				    <div class="layui-input-block">
				      <select lay-verify="" class="my-cargoNo"> 
				        <option value="">请选择购买的货物的编号</option>
				        <%
						sql=String.format("SELECT cargoNo,name FROM cargo;");
						rs=databaseBean.executeQuery(sql);
						while(rs.next()){
							%>
							<option value="<%=rs.getString("cargoNo")%>"><%=rs.getString("cargoNo")+" "+rs.getString("name")%></option>	
							<%
						}
						rs.close();
						%>
				        
				      </select>
				    </div>
  				</div>
  				<!-- 购买量 -->
  				<div class="layui-form-item">
				    <label class="layui-form-label">购买量</label>
				    <div class="layui-input-block">
				      <input type="text" lay-verify="" placeholder="请输入购买量" class="layui-input my-purchaseNum">
				    </div>
				</div>
		    </div>
		    
		  </div>
		</div> 

		<!--动作代码---->
	    <script>
	    	
	    	addCargo();//添加第一个货物
	    	
	        function addCargo() {
	        	/*复制主体内容*/
	        	cargoNum++;
	            //获得父节点对象
	            var father = document.getElementById("cargo0").parentNode;
	            
	            //克隆目标
	            var newCargo = document.getElementById("cargo0").cloneNode(true);

	            //修改ID
	            newCargo.id = "cargo" + cargoNum;
	            if(cargoNum!==1){
	            	newCargo.classList.remove("layui-show");
	            }
	            
	            newCargo.style.visibility="visible";
	          	//为复制元素添加name属性
	            var selectElement = newCargo.getElementsByClassName("my-cargoNo")[0];
	            selectElement.name="cargoNo";
	            selectElement.setAttribute('lay-verify','required');//设置为必填项
	            
	            var inputElement = newCargo.getElementsByClassName("my-purchaseNum")[0];
	            inputElement.name="purchaseNum";
	            inputElement.setAttribute('lay-verify','required|number');//设置为必填项
	            
	            //将新元素加入原本的表单中
	            father.appendChild(newCargo);
	            
	            /*复制标签内容*/
	            father = document.getElementById("cargoLabel0").parentNode;
	            var newCargo = document.getElementById("cargoLabel0").cloneNode(true);
	            newCargo.id = "cargoLabel" + cargoNum;
	            if(cargoNum!==1){
	            	newCargo.classList.remove("layui-this");
	            }
	            
	            
	            newCargo.style.visibility="visible";
	            newCargo.innerHTML="货物"+ cargoNum;
	            father.appendChild(newCargo);
	            
	            
	          	//更新渲染
	            var element = layui.element;
	            element.render('tab');
	            
	            var form = layui.form;
	            form.render('select');
	            
	        }
	    </script>
	    
	    <div class="layui-form-item" id="submitDiv">
	    <div class="layui-input-block">
	    	<button type="button" class="layui-btn layui-btn-normal" onclick="addCargo()">
	    	<i class="layui-icon layui-icon-addition"></i> 
	    	添加新货物
	    	</button>
	      	<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
	      	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
  		</div>
	</form>


</body>
</html>